@charset "utf-8";
$font-size:12;/**********变量元素*********/
@function bgg($px){/************函数样式************/
    @return $px/$font-size*(640/640)*1rem;
}
html{/**************html根字体大小**************/
    font-size: $font-size*1px;
}

/***********这里是页面*********/
.web{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    header{/***********头部样式************/
        width: 100%;
        height: bgg(88);
        background: rgba(0,0,0,0.8);
        display: inline-block;
        font-size: 0;
        .search_box{
            position: relative;
            .yuan{
                width: bgg(50);
                height: bgg(50);
                background: #b60005;
                border-radius: 50%;
                margin-top: bgg(18);
                margin-left: bgg(12);
            }
            .font{
                font-size: bgg(40);
                color: #ffffff;
                position: absolute;
                top: bgg(3);
                left: bgg(18);
            }
            input{
                width: bgg(534);
                height: bgg(52);
                border: bgg(2) solid #ffffff;
                color: #ffffff;
                font-size: bgg(26.89);
                background: #1f1f1f;
                border-radius: bgg(52);
                float: right;
                line-height: bgg(52);
                padding-left: bgg(70);
                padding-right: bgg(70);
                box-sizing: border-box;
                word-break: break-all;
                margin-top: bgg(-51);
                margin-right: bgg(21);
            }
//          input::-webkit-input-placeholder{
//              line-height: bgg(52);
//              padding-left: bgg(70);
//              vertical-align: middle;
//          }
            .search{
                font-size: bgg(35);
                color: #ffffff;
                position: absolute;
                top: bgg(3);
                left: bgg(95);
            }
        }
    }
    section{/**********这里是内容样式**********/
        width: 100%;
        height: 100%;
        .section{
            margin-left: bgg(28);
//          margin-top: bgg(17);
            p{
                color: #211d1d;
                font-size: bgg(26.63);
                padding-top: bgg(33);
//              margin-left: bgg(31);
            }
            .chao{
                text-decoration: none;
                display: inline-block;
                width: bgg(153);
                height: bgg(57);
                border: bgg(1) solid #dedede;
                text-align: center;
                margin-top: bgg(17);
                margin-right: bgg(10);
                line-height: bgg(57);
                color: #8b8b8b;
                font-size: bgg(29.23);
                float: left;
                overflow: hidden;
                &:active{
                    color: red;
                }
            }
            a:nth-child(3){
                width: bgg(178);
                height: bgg(57);
//              margin-left: bgg(10);
            }
            a:nth-child(4){
                width: bgg(202);
                height: bgg(57);
//              margin-left: bgg(10);
            }
            a:nth-child(5){
                width: bgg(120);
                height: bgg(57);
                margin-top: bgg(10);
            }
            a:nth-child(6){
                width: bgg(154);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
            a:nth-child(7){
                width: bgg(291);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
            a:nth-child(8){
                width: bgg(95);
                height: bgg(57);
                margin-top: bgg(10);
            }
            a:nth-child(9){
                width: bgg(251);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
            .float{
                width: bgg(153);
                height: bgg(57);
                border: bgg(1) solid #dedede;
                text-align: center;
                margin-top: bgg(17);
                margin-right: bgg(10);
                overflow: hidden;
                span{
                    line-height: bgg(57);
                    color: #8b8b8b;
                    font-size: bgg(29.23);
                    &:active{
                        color: red;
                    }
                }
            }
            .yidong{
                width: bgg(178);
                height: bgg(57);
//              margin-left: bgg(10);
            }
            .yewu{
                width: bgg(202);
                height: bgg(57);
//              margin-left: bgg(10);
            }
            .ozo{
                width: bgg(120);
                height: bgg(57);
                margin-top: bgg(10);
            }
            .meijie{
                width: bgg(154);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
            .biange{
                width: bgg(291);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
            .pingtai{
                width: bgg(95);
                height: bgg(57);
                margin-top: bgg(10);
            }
            .shanghai{
                width: bgg(251);
                height: bgg(57);
                margin-top: bgg(10);
//              margin-left: bgg(10);
            }
        }
    }
    footer{
        /*************这里是尾部样式*************/
    }
}
